<template>
  <div style="max-width: 800px; margin: 40px auto;">
    <el-card shadow="hover">
      <template #header>
        <span style="font-size: 20px; font-weight: bold;">订单详情</span>
      </template>
      <div v-if="order && order.order">
        <!-- 收货信息 -->
        <el-descriptions title="收货信息" :column="1" border style="margin-bottom: 20px;">
          <el-descriptions-item label="收货人">{{ order.receiverName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ order.receiverPhone || '-' }}</el-descriptions-item>
          <el-descriptions-item label="收货地址">{{ order.shippingAddress || '-' }}</el-descriptions-item>
        </el-descriptions>
        <!-- 订单信息 -->
        <el-descriptions title="订单信息" :column="2" border style="margin-bottom: 20px;">
          <el-descriptions-item label="订单号">{{ order.order.orderSn }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ order.order.createTime }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">{{ statusText(order.order.status) }}</el-descriptions-item>
          <el-descriptions-item label="总金额">
            <span style="color: #F56C6C; font-weight: bold;">￥{{ order.order.totalAmount && order.order.totalAmount.toFixed ? order.order.totalAmount.toFixed(2) : order.order.totalAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="备注">{{ order.order.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
        <!-- 商品明细 -->
        <el-table :data="order.items || []" style="width: 100%; margin-bottom: 16px;">
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="productPrice" label="单价" width="100">
            <template #default="scope">
              ￥{{ scope.row.productPrice && scope.row.productPrice.toFixed ? scope.row.productPrice.toFixed(2) : scope.row.productPrice }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column label="小计" width="100">
            <template #default="scope">
              ￥{{ (scope.row.productPrice * scope.row.quantity).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 操作按钮（可根据卖家需求扩展） -->
        <div style="margin-top: 24px; text-align: right;">
          <el-button @click="goBack">返回订单列表</el-button>
        </div>
      </div>
      <div v-else style="text-align: center; color: #bbb; padding: 40px;">订单不存在</div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const order = ref(null)

function statusText(status) {
  switch (status) {
    case 'UNPAID': return '待付款'
    case 'PAID': return '已付款'
    case 'SHIPPED': return '已发货'
    case 'COMPLETED': return '已完成'
    case 'CANCELLED': return '已取消'
    case 'REFUNDING': return '退款中'
    case 'REFUNDED': return '已退款'
    default: return status
  }
}

function fetchOrderDetail() {
  request.get(`/api/seller/orders/${route.params.orderId}`).then(res => {
    if (res.success) {
      order.value = res.data
    } else {
      ElMessage.error(res.message || '获取订单详情失败')
    }
  })
}

function goBack() {
  router.push('/seller/orders')
}

onMounted(fetchOrderDetail)
</script>

<style scoped>
.el-card {
  background: #fff;
}
</style> 